<template>
	<view class="uni_box home">
		<navbar title='制定学习计划' :yin="true">
		</navbar>
		<view class="content">
			<view class="uni-margin-wrap">
				<swiper class="swiper" :circular="false" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
					:duration="duration" :current="current" indicator-active-color="rgba(253, 137, 79, 1)" indicator-color="rgba(226, 226, 226, 1)" @change="swchange">
					<swiper-item class="oneitem">
						<view class="dasuan">
							<text class="nida">您打算什么时候开始学习？</text>
							<view class="xuan" @click="daclick(1)">
								<text class="onexuan">{{ start_day?start_day:"请选择" }}</text>
							</view>
							<view class="wanchengtwo" @click="getnext">下一步</view>
						</view>
						
					</swiper-item>
					<swiper-item>
						<view class="dasuan">
							<text class="nida">您打算什么时候开始考试？</text>
							<view class="xuan"  @click="daclick(2)">
								<text class="onexuan">{{ ks_day?ks_day:"请选择" }}</text>
							</view>
							<view class="wanchengtwo" @click="getnext">下一步</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="dasuan twoitem">
							<text class="nida">周末每天学习时长？</text>
							<view class="xuan">
								<text class="onexuan">{{ day_hour?day_hour+'h':'请选择' }}</text>
							</view>
						</view>
						<view class="moxue">
							<image class="mobg" src="@/pages_subject/static/img/shibg.png" mode="" />
							<view class="xueitem">
								<view class="xuelist">
									<view class="xues" v-for="(item,index) in 24" :key="index" @click="getshichang(index)">
										<text class="shi" :class="day_hour==index+1?'shiactive':''">{{index+1}}h</text>
									</view>
								</view>
							</view>
						</view>
						<view class="wanchengthree" @click="getnext">下一步</view>
					</swiper-item>
					<swiper-item>
						<view class="dasuan threeitem">
							<text class="nida" style="font-size: 25rpx;">您一周有几天时间可以用来学习？</text>
							<view class="xuan">
								<text class="onexuan">{{ fourinfo?fourinfo+'天':'请选择' }}</text>
							</view>
						</view>
						<view class="tianlist">
							<view class="tianitem" v-for="(item,index) in fourdata" :key="index" @click="gettian(item.nums)">
								<view class="tians" :class="fourinfo==item.nums?'tactive':''">{{ item.name }}</view>
							</view>
						</view>
						<view class="wanchengthree" @click="getnext">下一步</view>
					</swiper-item>
					<swiper-item>
						<view class="dasuan fouritem">
							<text class="shunxu">以下科目顺序表示你的学习顺序，也可通过拖拽调整顺序。更新完成后方可加入学习计划。</text>
						</view>
							<!-- <scroll-view  scroll-y class="tianlisttwo" style="margin-top: 30rpx;">
								<view class="tianitemtwo" v-for="(item,index) in list" :key="index" draggable="true" @dragstart="handleDragStart(index)" @dragover="handleDragOver" @drop="handleDrop(index)">
									<view class="tians tactive">{{item.name}}</view>
								</view>
							</scroll-view> -->
						<view class="tianlisttwo">
							<HM-dragSorts ref="dragSorts"  :list="list" :autoScroll="true" :feedbackGenerator="true" :listHeight="350" :rowHeight="45" @change="change" @confirm="confirm" @onclick="onclick" ></HM-dragSorts>  
						</view>
						
						<view class="wancheng" @click="getwancheng">完成制定</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="botbg">
				
				<image class="shibot" v-if="current==1||current==3" src="@/pages_subject/static/img/kaobg.png" mode="" />
				<image class="shibot" v-else src="@/pages_subject/static/img/shibot.png" mode="" />
			</view>
			
		</view>

		<view class="time">
			<u-calendar z-index="10075" v-model="rishow" max-date="2550-01-01" :mode="mode" active-bg-color="#FD874F" range-color="#FD874F"  range-bg-color="rgba(253, 135, 79, 0.13)" @change="timechange"></u-calendar>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,
				rishow:false,
				mode:'date',
				current:0,
				combo_id:'1',
				list:[],
				fourdata:[
					{nums:1,name:'1天'},
					{nums:2,name:'2天'},
					{nums:3,name:'3天'},
					{nums:4,name:'4天'},
					{nums:5,name:'5天'},
					{nums:6,name:'6天'},
					{nums:7,name:'7天'},
				],
				fourinfo:'',

				start_day:'',
				ks_day:'',
				day_hour:'',
				leitype:1,//1开始学习
			}
		},
		onLoad(option) {
			if(option.combo_id){
				this.combo_id = option.combo_id
			}
			this.getkemu()
		},
		onShow() {
		},
		methods: {
			
			async getkemu(){
				let res = await this.$u.api.getPlanDefault({
					combo_id:this.combo_id
				});
				this.list = res
			},
			swchange(e){
				// console.log(e)
				this.current = e.detail.current
			},
			gettian(nums){
				this.fourinfo = nums
			},
			daclick(e){
				this.leitype = e
				console.log("+++")
				this.rishow=true
			},
			timechange(e){
				console.log(e)
				if(this.leitype == 1){
					this.start_day = e.result
				}else if(this.leitype == 2){
					this.ks_day = e.result
				}
			},
			getshichang(index){
				this.day_hour = index+1
			},
			push(){
                // 和数组的push使用方法一致，可以push单行，也可以push多行
                this.$refs.dragSorts.push({
                        "name": "push行",
                        "icon": "/static/img/2.png"
                    });
            },
            unshift(){
                // 和数组的unshift使用方法一致，可以unshift单行，也可以unshift多行
                this.$refs.dragSorts.unshift({
                        "name": "unshift行",
                        "icon": "/static/img/2.png"
                    });
            },
            splice(){
                // 和数组的unshift使用方法一致 下标1开始删除1个并在下标1位置插入行
                this.$refs.dragSorts.splice(1,1,{
                        "name": "splice行",
                        "icon": "/static/img/2.png"
                    });
            },
            onclick(e){
                // console.log('=== onclick start ===');
                // console.log("被点击行: " + JSON.stringify(e.value));
                // console.log("被点击下标: " + JSON.stringify(e.index));
                // console.log('=== onclick end ===');
            },
            change(e){
                // console.log('=== change start ===');
                // console.log("被拖动行: " + JSON.stringify(e.moveRow));
                // console.log('原始下标：',e.index);
                // console.log('移动到：',e.moveTo);
                // console.log('=== change end ===');
            },
            confirm(e){
				// console.log(e)
                // console.log('=== confirm start ===');
                // console.log("被拖动行: " + JSON.stringify(e.moveRow));
                // console.log('原始下标：',e.index);
                // console.log('移动到：',e.moveTo);
                // console.log('=== confirm end ===');
				this.list = e.list
            },
			async getwancheng(){
				console.log(JSON.stringify(this.list))
				if(!this.start_day){
					this.$u.toast("请选择开始学习时间");
					return false;
				}
				if(!this.ks_day){
					this.$u.toast("请选择考试时间");
					return false;
				}
				if(!this.fourinfo){
					this.$u.toast("请选择每天学习时长");
					return false;
				}
				if(!this.day_hour){
					this.$u.toast("请选择学习天数");
					return false;
				}
				let res = await this.$u.api.addPlan({
					combo_id:this.combo_id,
					start_day:this.start_day,
					ks_day:this.ks_day,
					week_day:this.fourinfo,
					day_hour:this.day_hour,
					subject_list:JSON.stringify(this.list)
				});
				this.$u.toast("操作成功");
				setTimeout(() => {
					uni.navigateBack()
				}, 1000);
			},
			getnext(){
				this.current ++
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		// padding-bottom: 150rpx;
		.uni-margin-wrap{
			height: 86vh;
			position: relative;
			.swiper{
				position: relative;

				width: 100%;
				height: 100%;
			}
			.dasuan{
				display: flex;
				position: relative;
				width: 90%;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				margin: 0 auto;
				height: 100%;
				.nida{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					display: inline-block;
				}
				.xuan{
					width:300rpx;
					height: 55rpx;
					background: #FFFFFF;
					border: 1px solid #CCCCCC;
					display: flex;
					align-items: center;
					padding: 0 20rpx;
					margin-left: auto;
				}
				.onexuan{
					color: #999;
					font-size: 28rpx;
					font-weight: 400;
				}
			}
			.twoitem{
				height: auto;
    			margin-top: 13%;
			}
			.threeitem{
				height: auto;
    			margin-top: 23%;
			}
			.fouritem{
				height: auto;
    			margin-top: 13%;
			}
			.shunxu{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #666666;
			}
			.moxue{
				position: relative;
				height: 700rpx;
				margin: 30rpx;
				.mobg{
					position: absolute;
					width: 100%;
					height: 100%;
				}

				.xueitem{
					position: relative;
					width: 100%;
					height: 100%;
					padding: 15% 30rpx 30rpx;
					.xuelist{
						// height: 200px;
						width: 100%;
						margin-top: 10%;
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						.xues{
							width: 14%;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-bottom: 50rpx;
							.shi{
								min-width: 68rpx;
								height: 68rpx;
								
								border-radius: 50%;
								display: flex;
								align-items: center;
								justify-content: center;
								font-family: PingFang SC;
								font-weight: 500;
								font-size: 28rpx;
								color: #333333;

							}
							.shiactive{
								background: linear-gradient(-90deg, #FA4E4E, #FD894F);
								color: #FFFFFF;
							}
						}
					}
				}
			}
			// .xuelist{
			// 	min-height: 60vh;
			// 	position: relative;
			// }
			.tianlist{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				padding: 0 30rpx;
				margin-top: 20%;
				.tianitem{
					width: 31%;
					margin-right: 2%;
					margin-bottom: 50rpx;
					.tians{
						padding: 15rpx 40rpx;
						background: #FBECE8;
						border-radius: 5rpx;
						border: 1px solid #FD864F;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #FD864F;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.tactive{
						background: linear-gradient(-90deg, #FA4E4E, #FD894F);
						color: #fff;
					}
				}
			}

			.tianlisttwo{
				display: flex;
				flex-direction: column;
				// flex-wrap: wrap;
				padding: 0 30rpx;
				position: relative;
				margin-top: 30rpx;
				// height: 66vh;
				width: auto;
				.tianitemtwo{
					// width: 100%;
					// margin-right: 2%;
					margin-bottom: 30rpx;
					.tians{
						padding: 15rpx 40rpx;
						background: #FBECE8;
						border-radius: 5rpx;
						border: 1px solid #FD864F;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #FD864F;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.tactive{
						background: linear-gradient(-90deg, #FA4E4E, #FD894F);
						color: #fff;
					}
				}
			}
			
			
		}
	}
	.wancheng{
		height: 70rpx;
		background: linear-gradient(-90deg, #FA4E4E, #FD894F);
		border-radius: 5rpx;
		width: 94%;
		margin: 50rpx auto 10%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
	}
	.wanchengtwo{
		height: 70rpx;
		background: linear-gradient(-90deg, #FA4E4E, #FD894F);
		border-radius: 5rpx;
		width: 94%;
		margin: 50rpx auto 10%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
		position: absolute;
		bottom: 5%;

	}
	.wanchengthree{
		height: 70rpx;
		background: linear-gradient(-90deg, #FA4E4E, #FD894F);
		border-radius: 5rpx;
		width: 94%;
		margin: 50rpx auto 10%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
		position: absolute;
		bottom: 0%;
		left: 3%;

	}
	.botbg{
		.shibot{
			position: absolute;
			width: 100%;
			bottom: 0;
			left: 0;
			height: 85rpx;
		}
	}
	/deep/.time .u-btn--primary {
		color: #ffffff;
		border-color: #FD874F;
		background-color: #FD874F;
	}
</style>
